<% page_title = title(t("views.videos.meta.title")) %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url(request.path) %>" />
  <meta name="description" content="<%= Settings::Community.community_description %>">
  <%= meta_keywords_default %>

  <meta property="og:type" content="website" />
  <meta property="og:url" content="<%= app_url(request.path) %>" />
  <meta property="og:title" content="<%= page_title %>" />
  <meta property="og:image" content="<%= Settings::General.main_social_image %>">
  <meta property="og:description" content="<%= t("views.videos.meta.og.description", community: community_name) %>" />
  <meta property="og:site_name" content="<%= community_name %>" />

  <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= page_title %>">
  <meta name="twitter:description" content="<%= t("views.videos.meta.og.description", community: community_name) %>">
  <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
  <meta name="twitter:card" content="summary_large_image">
<% end %>

<div id="index-container" data-which="videos" data-params="<%= params.to_json(only: %i[tag username q]) %>">

  <main id="main-content" class="crayons-layout crayons-layout--header-inside">
    <% if @tag %>
      <div class="crayons-subtitle-2 pl-4 pt-4">
        <a href="/videos">
          All videos
        </a>
      </div>
    <% end %>
    <header class="crayons-page-header">
      <h1 class="crayons-title">
        <% if @tag %>
          <%= render_tag_link(@tag.accessible_name, path_suffix: "/videos") %> on Video
        <% else %>
          <%= t("views.videos.heading", community: community_name) %>
        <% end %>
      </h1>
    </header>
    <% unless @tag %>
      <div class="crayons-subtitle-2 mb-4" style="overflow-x: auto; white-space: nowrap;border-right: 2px solid #b5b5b5;">
        <% Tag.from_subforem.order("hotness_score desc").limit(25).each do |tag| %>
          <%= render_tag_link(tag.accessible_name, path_suffix: "/videos") %>
        <% end %>
      </div>
    <% end %>
    <div class="js-video-collection grid gap-2 m:gap-4 s:grid-cols-2 m:grid-cols-3 mb-6">
      <% @video_articles.each do |video_article| %>
        <a href="<%= video_article.path %>" id="video-article-<%= video_article.id %>" class="crayons-card media-card">
          <% if video_article.video&.include?("youtube.com") || video_article.video&.include?("player.mux.com") %>
            <div class="crayons-article__cover" style="width:100%; aspect-ratio:16/9; position:relative;">
              <iframe
                src="<%= video_article.video %>"
                style="border:0; position:absolute; top:0; left:0; width:100%; height:100%;"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
                title="<%= video_article.title %>"
              ></iframe>
            </div>
          <% else %>
            <div class="media-card__artwork">
              <%= optimized_image_tag(video_article.video_thumbnail_url,
                                      optimizer_options: { crop: "crop", width: 320, height: 180 },
                                      image_options: { alt: video_article.title, loading: "lazy", class: "w-100 object-cover block aspect-16-9 h-auto" }) %>
              <span class="media-card__artwork__badge"><%= video_article.video_duration_in_minutes %></span>
            </div>
          <% end %>
          <div class="media-card__content">
            <h2 class="fs-base mb-2 fw-medium"><%= video_article.title %></h2>
            <small class="fs-s">
              <%= video_article.user.name %>
            </small>
          </div>
        </a>
      <% end %>
    </div>
    <div class="subvideos"></div>
    <div class="loading-articles" id="loading-articles">
      <%= t("core.loading") %>
    </div>
  </main>
</div>
